<template>
    <div
        style="
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
            padding-top: 5rem;
            align-items: center;
        ">
        <div>
            <button @click="handleAdd1s(1)">+1</button>
            <button @click="handleAdd1s(2)">+2</button>
            <button @click="handleAdd1s(3)">+3</button>
            <button @click="t = [];n=0">x0</button>
        </div>
        <div>
            {{ n }}
        </div>
        <table>
            <tbody>
                <tr v-for="item in t">
                    <td>{{ item }}</td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const n = ref(0)
const t = ref<string[]>([])
function handleAdd1s(p) {
    n.value += p
    const tt = new Date()
    const h = tt.getHours()
    const m = tt.getMinutes()
    const s = tt.getSeconds()
    t.value.unshift(`${h}:${m}:${s}`)
}
</script>

<style lang="scss"></style>
